<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">   
	<title>$!{appName}</title>
	<link rel="stylesheet" href="${webPath}/skin/share/css/index.css">
	<!-- <link rel="stylesheet/less" href="./css/index.less">
	<script src="./libs/less.js"></script> -->
</head>
<body>
	
	<div class="wrapper">
		<!-- 内容部分 -->
		<div class="content">
			<!-- 图片列表 -->
			 <div class="wp">
		        <div class="wp-inner">
		            <div class="page page1"><img src="${webPath}/skin/share/images/h5-${topUserId}-1.png" alt=""></div>
		            <div class="page page2"><img src="${webPath}/skin/share/images/h5-${topUserId}-2.png" alt=""></div>
		            <div class="page page3"><img src="${webPath}/skin/share/images/h5-${topUserId}-3.png" alt=""></div>
		        </div>
		    </div>

			<!-- 向下小箭头 -->
			<div class="arrow">
				<a href="javascript:;"></a>
			</div>
			<!-- 注册 -->
			<div class="register-btn">
				<a href="javascript:;">点 领 20 元 红 包</a>
			</div>
		</div>
		<!-- 注册模态框 -->
		<div class="register-page">
			<div class="register-form">
				<h3>注册</h3>
				<!--<a href="javascript:;" class="download">直接下载</a>-->
				<form novalidate="false">
					<label for="phone">
						手机号：
						<input type="tel" id="phone" autofocus="autofocus">
					</label>
					<label for="password">
						密&nbsp;&nbsp;码：
						<input type="password" id="password">
					</label>
					<label for="verification">
						验证码：
						<input type="text" id="verification">
						<a class="verification-btn" readOnly='readOnly'>获取验证码</a>
					</label>
					<a id="submit">确认</a>
				</form>
				<div class="protocol">
					<input type="checkbox" id="pact" checked="true">
					<span>&nbsp;我已阅读并同意</span>
					<a href="javascript:;" class="pact-link">$!{appName}用户协议&nbsp;&gt;&gt;</a>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var webPath = '${webPath}';
	</script>
	<script src="${webPath}/libs/zepto.js"></script>
    <script src="${webPath}/libs/zepto.fullpage.js"></script>
    <script src="${webPath}/libs/layer.js"></script>
    <script src="${webPath}/libs/jquery.base64.js"></script>
	<script src="${webPath}/js/index.js"></script>
    <script>
    	var bodyHeight = $('body').height();
	    bodyHeight *= 0.6;
	    $(function () {
	    	// 下载链接
	    	$('.download').attr('href', webPath + '/share/downLoadPage.htm?topUserId=$!{topUserId}');
	    	// 协议地址
	    	$('.pact-link').attr('href', webPath + '/share/agreement.htm?topUserId=$!{topUserId}');
	    	
	    	// 点击注册按钮，模态框展示
			$('.register-btn').on('click', function () {
				$('.register-page').css('display','block');
			})
			$('.register-page').on('click', function(event) {
				if (event.target.className == 'register-page') {
					$('.register-page').css('display','none');
				}
			})

			// 点击协议勾选切换 
			$('#pact').on('click', function () {
				if ($(this).attr('checked') == 'true') {
					$(this).attr('checked','false');
					$(this).css('background-image','url(${webPath}/skin/share/images/unchecked.png)');
				} else {
					$(this).attr('checked','true');
					$(this).css('background-image','url(${webPath}/skin/share/images/checked.png)');
				}
			})

			// 动态验证手机号是否已经注册
			$('#phone').keyup(function(){
				var phone = $('#phone').val(); // 手机号
				if(phone.match(/^(1)[0-9]{10}$/)){
					$.ajax({
						type: 'post',
						url: webPath + '/app/user/checkExist.htm',
						contentType: 'application/json; charset=utf-8',
						data: JSON.stringify({"phone": phone}),
						dataType: 'json',
						success: function(data){
							if (data.code == 50006){
								layer.open({
								  	content: '该手机号已经注册',
								  	skin: 'msg',
								  	time: 3,
									fixed: false,
									top: -bodyHeight
								});
								// 如果手机号已经注册，那么不发送验证码
								$('.verification-btn').off('click', function(){verify(this)});
							} else if(data.code == 200) {
//								layer.open({
//								  	content: '该手机号未注册',
//								  	skin: 'msg',
//								  	time: 3,
//									fixed: false,
//									top: -bodyHeight
//								});
								// 手机符合规则，给获取验证码按钮绑定事件
								$('.verification-btn').on('click', function(){verify(this)});
							}
						}
					});
				}
			});

			// 获取验证码，验证手机是否已注册
			$('.verification-btn').on('click', function () {
				var phone = $('#phone').val(); // 手机
				if(!phone.match(/^(1)[0-9]{10}$/)){
					layer.open({
					  	content: '手机格式不正确',
					  	skin: 'msg',
					  	time: 3,
						fixed: false,
						top: -bodyHeight
					});
					return false;
				}
			})
			
			// 注册按钮事件验证绑定
			$('#submit').on('click', vilidate);

			// 如果手机号符合规则,可以点击获取验证码 开始倒计时
			function verify(self) {
				var phone = $('#phone').val(); // 手机
				if(!phone.match(/^(1)[0-9]{10}$/)){
					layer.open({
					  	content: '手机格式不正确',
					  	skin: 'msg',
					  	time: 3,
						fixed: false,
						top: -bodyHeight
					});
					return false;
				}
				// ajax请求发送验证码
				$.ajax({
					type: 'post',
					url: webPath + '/common/sms/sendVerify.htm',
					contentType: 'application/json; charset=utf-8',
					data: JSON.stringify({'phone': phone, bizType: 0}),
					dataType: 'json',
					success: function(data){
						if (data.code == 200) {
							layer.open({
							  	content: '验证码已发送',
							  	skin: 'msg',
							  	time: 3,
								fixed: false,
								top: -bodyHeight
							});
							$('.verification-btn').off('click', function(){verify(this)});
						}else {
							layer.open({
							  	content: data.message,
							  	skin: 'msg',
							  	time: 3,
								fixed: false,
								top: -bodyHeight
							})
						}
					}
				});
				var time = 60;
				$(self).css('background-color','#f0f0f0');
				$(self).off('click');
				var timer = setInterval(function () {
					if(time == 1){
						time = 60;
						$(self).text('重新发送');
						$(self).css('backgroundColor', '#fff');
						clearInterval(timer);
						$(self).on('click', function(){verify(this)});
					}else{
						time--;
						$(self).text(time + 's后重试');
					}
				},1000);
			}

			// 验证 手机号，密码，验证码，是否勾选协议，并提交
			function vilidate(){
				var phone = $('#phone').val(); // 手机
				var pwd = $('#password').val(); // 密码
				var verify = $('#verification').val(); // 验证码
				var pact_checked = $('#pact').attr('checked'); // 协议
				
				if(!phone.match(/^(1)[0-9]{10}$/)){
					layer.open({
					  	content: '手机格式不正确',
					  	skin: 'msg',
					  	time: 3,
						fixed: false,
						top: -bodyHeight
					})
				}else if($.trim(pwd) == ''){
					layer.open({
					  	content: '请设置登录密码',
					  	skin: 'msg',
					  	time: 3,
						fixed: false,
						top: -bodyHeight
					})
				}else if(!verify){
					layer.open({
					  	content: '请输入验证码',
					  	skin: 'msg',
					  	time: 3,
						fixed: false,
						top: -bodyHeight
					})
				}
				else if(pact_checked == 'false'){
					layer.open({
					  	content: '请勾选协议',
					  	skin: 'msg',
					  	time: 3,
						fixed: false,
						top: -bodyHeight
					})
				}
				else{
					var param = {
						phone: phone,
						password: $.base64.encode(pwd),
						verifyCode: verify,
						reCode: '$!{reCode}',
						topUserId: '$!{topUserId}'
					};
					$.ajax({
						type: 'post',
						url: webPath + '/app/user/register.htm',
						contentType: 'application/json; charset=utf-8',
						data: JSON.stringify(param),
						dataType: 'json',
						success: function(data){
							if(data.code == 200){
								layer.open({
								  	content: '恭喜您，注册成功！2秒后跳转到下载页面',
								  	skin: 'msg',
								  	time: 3,
									fixed: false,
									top: -bodyHeight
								});
								setTimeout(function() {
									window.location.href = webPath + '/share/downLoadPage.htm?topUserId=$!{topUserId}';
								},2000);
							}else{
								layer.open({
								  	content: data.message,
								  	skin: 'msg',
								  	time: 3,
									fixed: false,
									top: -bodyHeight
								})
							}
						}
					});
				}
			}
	   });
        $('.wp-inner').fullpage({
        	change: function () {
        		var curPage = $.fn.fullpage.getCurIndex();
        		if (curPage == 2) {
            		$('.arrow').css('display','none');
            	}else{
            		$('.arrow').css('display','block');
            	}
        	}
        });
        // 点击箭头实现滑动
        $('.arrow').on('click', function(){
            $.fn.fullpage.moveNext(true);
        })
    </script>
</body>
</html>